Autolayout で正多角形の頂点上に UI コンポーネントを配置する

Autolayout で正多角形の頂点上に UI コンポーネントを配置する

Clock Icon2015.04.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

幾何学模様を作りましょう

Autolayout で幾何学的な配置を表現するときは、View にcenter制約を与えて、そのconstantを調整すると簡単です。

正三角形

polygon3

正五角形

polygon5

これらは共に上記の制約で作られています。

※「●」は UILabel です。

やり方

polygon_sample1

 

polygon_sample2

 

polygon_sample3

 

polygon_sample4

 

polygon_sample5

 

polygon_sample6

 

polygon_sample7

基本はこの手順です。

  1. View にcenter制約を与える
  2. constantを調整する

constantの座標系(?)は、左上が (+, +)、 右下が (-, -) のようです。

練習

それでは実際に UILabel を正三角形の頂点上に配置してみましょう。 手順は以下のとおりです。

  1. 正三角形の外接円の半径を決める
  2. それぞれのコンポーネントについて、中心からの偏角を求める
  3. 極座標を使ってコンポーネントの座標を求める
  4. 座標分だけcenter制約のconstantをずらす

1. 正三角形の外接円の半径を決める

これは好きな値を決めるだけです。 サンプルでは半径r = 100としました。

polygon_sample8

2. それぞれのコンポーネントについて、中心からの偏角を求める

ここは気合で求めてください。 x = 0, y = 0の補助線を引けば簡単に求めることができます。

polygon_sample9-2

3. 極座標を使ってコンポーネントの座標を求める

極座標では次の関係が成り立ちます。

  • x = r cosθ
  • y = r sinθ

それぞれの頂点座標に当てはめると、値は以下のようになります。

頂点 A = (100 * cos90°, 100 * sin90°) = (0, 100)

頂点 B = (100 * cos(-30°), 100 * sin(-30°)) = (87, -50)

頂点 C = (100 * cos(-150°), 100 * sin(-150°)) = (-87, -50)

※小数点以下は四捨五入しています。

4. 座標分だけ center 制約の constant をずらす

上記の「例」で行ったようにconstantを設定していきます。 座標の正負が極座標と iOS の View では異なっていることに注意してください。 X 軸方向の値を逆転させる必要があります。

  • 頂点 A
    • Center X constant = 0
    • Center Y constant = 100
  • 頂点 B
    • Center X constant = -87
    • Center Y constant = -50
  • 頂点 C
    • Center X constant = 87
    • Center Y constant = -50

できあがり

polygon3

まとめ

center制約のconstant」というのは直感的ではありませんが、調整することは可能です。 Autolayout で View を構成するときは少しだけ意識してみましょう。

おまけ

polygon_sample10-2

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.